import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:ride_rex/main/home/landmark_bean.dart';
import 'package:ylm_ui_kit/ylm_ui_kit.dart';

import '../../../generated/assets.dart';
import '../../../sqlite/db_manager.dart';

class MineLandmarkPage extends StatefulWidget {
  const MineLandmarkPage({super.key});

  @override
  State<MineLandmarkPage> createState() => _MineLandmarkPageState();
}

class _MineLandmarkPageState extends State<MineLandmarkPage> {
  List<LandmarkBean> list = [];

  @override
  void initState() {
    super.initState();
    init();
  }

  void init() async {
    list = await DbManager.getLandmarkData();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return BaseScaffold(
      titleStr: 'My Landmark',
      scaffoldBackgroundColor: Colors.white,
      child: GridView.builder(
        padding: EdgeInsets.only(top: 16.w),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisSpacing: 40.w,
          crossAxisSpacing: 8.w,
        ),
        itemBuilder: (context, index) {
          bool lock = !list[index].isUnlock;
          return Column(
            children: [
              Stack(
                alignment: Alignment.center,
                children: [
                  _buildIcon(index),
                  if (lock) ...[
                    _buildCover().positioned(top: 0, left: 0, right: 0, bottom: 0),
                    Assets.svgLockGreen.toSvg(width: 24.w),
                  ],
                ],
              ),
              CommonTextUtils.getText(list[index].landmark, fontWeight: FontWeight.bold).paddingTop(12.w),
            ],
          );
        },
        itemCount: list.length,
      ),
    );
  }

  Widget _buildCover() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.black.withOpacity(0.4),
        borderRadius: BorderRadius.circular(30.w),
      ),
    );
  }

  Widget _buildIcon(int index) {
    return IconWidget.image(
      'assets/png/${list[index].medalIcon}.png',
      width: 110.w,
      height: 110.w,
    );
  }
}
